import React from 'react';
import { Button, Space, Card, Typography, message } from 'antd';
import { getIPCService } from '../services/ipc-service';

const { Title, Text } = Typography;

export const IPCDemo: React.FC = () => {
  const ipcService = getIPCService();

  const testBasicCall = async () => {
    if (!ipcService) {
      message.error('IPC服务未初始化');
      return;
    }

    try {
      const result = await ipcService.helloWorld('测试用户');
      console.log('Hello World 结果:', result);
      message.success('调用成功，请查看控制台日志');
    } catch (error) {
      console.error('调用失败:', error);
      message.error('调用失败');
    }
  };

  const testHistoryCall = async () => {
    if (!ipcService) {
      message.error('IPC服务未初始化');
      return;
    }

    try {
      const result = await ipcService.getChatHistory();
      console.log('获取历史记录结果:', result);
      message.success('获取历史记录成功，请查看控制台日志');
    } catch (error) {
      console.error('获取历史记录失败:', error);
      message.error('获取历史记录失败');
    }
  };

  const testSystemInfo = async () => {
    if (!ipcService) {
      message.error('IPC服务未初始化');
      return;
    }

    try {
      const result = await ipcService.getSystemInfo();
      console.log('系统信息结果:', result);
      message.success('获取系统信息成功，请查看控制台日志');
    } catch (error) {
      console.error('获取系统信息失败:', error);
      message.error('获取系统信息失败');
    }
  };

  return (
    <Card style={{ margin: '20px' }}>
      <Title level={3}>IPC装饰器测试</Title>
      <Text type="secondary">
        点击按钮测试IPC调用，并在浏览器控制台查看详细的日志输出
      </Text>
      
      <div style={{ marginTop: '20px' }}>
        <Space direction="vertical" size="middle">
          <Button type="primary" onClick={testBasicCall}>
            测试基本调用 (Hello World)
          </Button>
          <Button onClick={testHistoryCall}>
            测试历史记录调用 (详细日志)
          </Button>
          <Button onClick={testSystemInfo}>
            测试系统信息调用 (静默日志)
          </Button>
        </Space>
      </div>

      <div style={{ marginTop: '20px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
        <Title level={5}>装饰器说明：</Title>
        <ul>
          <li><strong>详细日志</strong>: 记录请求参数、响应数据和执行时间（最多5000字符）</li>
          <li><strong>简单日志</strong>: 记录基本信息（最多500字符）</li>
          <li><strong>静默日志</strong>: 只记录错误信息</li>
        </ul>
      </div>
    </Card>
  );
};
